
import { ProColumns, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import {Button, Input, message, Modal, Space, Tabs} from 'antd';
import React from 'react';
import {updatePictureUsingPost} from "@/services/backend/pictureController";
import FileUploader from "@/components/FileUploader";
import AIOutPainting from "@/pages/My/components/AIOutPainting";
import PictureCropUploader from "@/components/PictureCropUploader";

interface Props {
  oldData?: API.PictureVO;
  visible: boolean;
  columns: ProColumns<API.PictureVO>[];
  onSubmit: (values: API.PictureUpdateRequest) => void;
  onCancel: () => void;
}

/**
 * 更新节点
 *
 * @param fields
 */
const handleUpdate = async (fields: API.PictureUpdateRequest) => {
  const hide = message.loading('正在更新');
  try {
    await updatePictureUsingPost(fields);
    hide();
    message.success('更新成功');
    return true;
  } catch (error: any) {
    hide();
    message.error('更新失败，' + error.message);
    return false;
  }
};

/**
 * 更新弹窗
 * @param props
 * @constructor
 */
const UpdateModal: React.FC<Props> = (props) => {
  const { oldData, visible, columns, onSubmit, onCancel } = props;

  if (!oldData) {
    return <></>;
  }

  return (
    <Modal
      destroyOnClose
      title={'更新图片信息'}
      open={visible}
      footer={null}
      onCancel={() => {
        onCancel?.();
      }}
    >
      <Tabs
        defaultActiveKey="1"
        onChange={() => {}}
        items={[
          {
            label: `修改图片`,
            key: '1',
            // children: <FileUploader id={oldData.id} description="图片上传" onFinish={()=>{onSubmit?.(oldData);}} />,
            children: <PictureCropUploader id={oldData.id} description="图片上传" onFinish={()=>{onSubmit?.(oldData);}} />,
          },
          {
            label: `修改信息`,
            key: '2',
            children: (<ProTable
              type="form"
              columns={columns}
              form={{
                initialValues: oldData,
              }}
              onSubmit={async (values: API.PictureUpdateRequest) => {
                const success = await handleUpdate({
                  ...values,
                  id: oldData.id as any,
                });
                if (success) {
                  onSubmit?.(values);
                }
              }}
            />),
          },
          {
            label: `AI扩图`,
            key: '4',
            children:<AIOutPainting data={oldData} onFinish={()=>{onSubmit?.(oldData);}}/>,
          },
        ]}
      />

    </Modal>
  );
};
export default UpdateModal;
